<style type="text/css">

    /*
    .page .header {
        position: fixed;
        top: 0px;
        width: 960px;
        z-index: 100;
    }

    .page .content {
        padding-top: 8em;
    }
    */
    
</style>
<div style="width: 430px; display: inline-block;">
    <div id="gal_lists">
    </div>
    <div id="smorebtncontainer" class="hidden">
        <button style="width: 100%;" onClick="javascript:showMore();">Tampilkan lebih banyak</button>
    </div>
    <div id="loadingbtncontainer" class="hidden">
        <button style="width: 100%;" disabled="disabled">Loading</button>
    </div>
</div>
<div style="width: 230px; display: inline-block; float:right;">
    <h1>Terpilih</h1>
    <div id="galhl_lists">
    </div>
    <div id="smorehlbtncontainer" class="hidden">
        <button style="width: 100%;" onClick="javascript:showMoreHL();">Tampilkan lebih banyak</button>
    </div>
    <div id="loadinghlbtncontainer" class="hidden">
        <button style="width: 100%;" disabled="disabled">Loading</button>
    </div>
</div>
<script type="text/javascript">
            var curPage = 0;
            var curPageHL = 0;

            jQuery(document).ready(function() {
                showMore();
                showMoreHL();
            });

            function showMore() {
                $("#smorebtncontainer").addClass("hidden");
                $("#loadingbtncontainer").removeClass("hidden");
                $.ajax({
                    url: "<?php echo site_url("service/getDataJSON"); ?>/galbar",
                    method: "POST",
                    dataType: "json", data: {
                        page: curPage,
                        perpage: 9
                    },
                    success: function(data) {
                        if (data.length > 0) {
                            curPage++;
                            $("#smorebtncontainer").removeClass("hidden");
                            $("#loadingbtncontainer").addClass("hidden");
                            for (var i = 0; i < data.length; i++) {
                                var gal = data[i];
                                var newGal = "";
                                newGal += "<div class='gal_item id" + gal.id + "' style='padding: 0.5em 0.5em; display: inline-block; width: 200px;'>";
                                newGal += "<div>";
                                newGal += "<h1><a href='<?php echo site_url("galeri/lihat"); ?>/" + gal.id + "'>" + gal.judul + "</a></h1>";
                                newGal += "</div>";
                                newGal += "<div>";
                                newGal += gal.approved + " oleh <a href='javascript:void(0);'>" + gal.poster_name + "</a> - " + gal.points + " points";
                                newGal += "</div>";
                                newGal += "<div style='margin: 1em 0;'>";
                                newGal += "<a href='<?php echo site_url("galeri/lihat"); ?>/" + gal.id + "'><img src='" + gal.tmb + "' /></a>";
                                newGal += "</div>"
                                newGal += "<div class='navbtns' style='text-align: right;'>";
                                newGal += "<a href='javascript:void(0);' onClick='javascript:askHL(" + gal.id + ");'><button class='pilihbtn'" + (gal.is_featured > 0 ? " disabled='disabled' " : "") + ">Pilih</button></a>";
                                newGal += "</div>";
                                newGal += "<hr />";
                                newGal += "</div>";
                                $("#gal_lists").append(newGal);
                            }
                            if (data.length < 9) {
                                $("#smorebtncontainer").addClass("hidden");
                                $("#loadingbtncontainer").addClass("hidden");
                            }
                        } else {
                            $("#smorebtncontainer").addClass("hidden");
                            $("#loadingbtncontainer").addClass("hidden");
                        }
                    }
                });
            }

            function askHL(id) {
                if (confirm("Pilih sebagai highlight?")) {
                    doHL(id);
                }
            }

            function doHL(id) {
                $.ajax({
                    url: "<?php echo site_url("galeri/sethl"); ?>",
                    method: "POST",
                    dataType: "json", data: {
                        id: id
                    },
                    success: function(data) {
                        $(".gal_item.id" + id + " .pilihbtn").prop("disabled", true);
                        $("#galhl_lists").html("");
                        curPageHL = 0;
                        showMoreHL();
                    }
                });
            }

            function showMoreHL() {
                $("#smorehlbtncontainer").addClass("hidden");
                $("#loadinghlbtncontainer").removeClass("hidden");
                $.ajax({
                    url: "<?php echo site_url("service/getDataJSON"); ?>/galhl",
                    method: "POST",
                    dataType: "json", data: {
                        page: curPageHL,
                        perpage: 5
                    },
                    success: function(data) {
                        if (data.length > 0) {
                            curPageHL++;
                            $("#smorehlbtncontainer").removeClass("hidden");
                            $("#loadinghlbtncontainer").addClass("hidden");
                            for (var i = 0; i < data.length; i++) {
                                var gal = data[i];
                                var newGal = "";
                                newGal += "<div class='galhl_item id" + gal.id + "' style='padding: 0.5em 0.5em; display: inline-block; width: 200px;'>";
                                newGal += "<div style='margin: 1em 0;'>";
                                newGal += "<a href='<?php echo site_url("galeri/lihat"); ?>/" + gal.id + "'><img src='" + gal.tmb + "' /></a>";
                                newGal += "</div>"
                                newGal += "<div>";
                                newGal += "<h1><a href='<?php echo site_url("galeri/lihat"); ?>/" + gal.id + "'>" + gal.judul + "</a></h1>";
                                newGal += "</div>";
                                newGal += "<div class='navbtns' style='text-align: right;'>";
                                newGal += "<a href='javascript:void(0);' onClick='javascript:askdelHL(" + gal.id + ");'><button>Hapus</button></a>";
                                newGal += "</div>";
                                newGal += "<hr />";
                                newGal += "</div>";
                                $("#galhl_lists").append(newGal);
                            }
                            if (data.length < 5) {
                                $("#smorehlbtncontainer").addClass("hidden");
                                $("#loadinghlbtncontainer").addClass("hidden");
                            }
                        } else {
                            $("#smorehlbtncontainer").addClass("hidden");
                            $("#loadinghlbtncontainer").addClass("hidden");
                        }
                    }
                });
            }

            function askdelHL(id) {
                if (confirm("Hapus dari highlight?")) {
                    dodelHL(id);
                }
            }

            function dodelHL(id) {
                $.ajax({
                    url: "<?php echo site_url("galeri/unsethl"); ?>",
                    method: "POST",
                    dataType: "json", data: {
                        id: id
                    },
                    success: function(data) {
                        $(".gal_item.id" + id + " .pilihbtn").prop("disabled", false);
                        $("#galhl_lists").html("");
                        curPageHL = 0;
                        showMoreHL();
                    }
                });
            }

</script>